<template>
	<div class="indexlayout-main-conent">
		<el-card>
		<el-form
		    ref="formRef"
		    :model="modelRef"
		    :rules="rulesRef"
		    label-width="120px"
		    class="ruleForm"
		      status-icon
		  >
		  <el-form-item label="用户名" prop="UserName">
		  	<el-input type="text" v-model="modelRef.UserName" placeholder="用户名" disabled="true" />
		  </el-form-item>
			<el-form-item label="手机号码" prop="Mobile">
				<el-input type="text" v-model="modelRef.Mobile" placeholder="手机号码" />
			</el-form-item>
			<el-form-item label="真实姓名" prop="RealName">
				<el-input v-model="modelRef.RealName" placeholder="真实姓名" />
			</el-form-item>
			<el-form-item label="邮箱" prop="Email">
				<el-input type="text" v-model="modelRef.Email" placeholder="电子邮箱" />
			</el-form-item>
			<el-form-item>
			      <el-button type="primary" @click="submitForm">修改</el-button>
			</el-form-item>
		</el-form>
</el-card>
	</div>
</template>

<script setup lang="ts">
	import { useI18n } from "vue-i18n";
	import { UserInfo } from './data.d'
	import { myInfo ,ApiUpdateMyInfo} from './api'
	import {
		reactive,
		ref,
		onMounted
	
	} from 'vue'
	import type {
		FormInstance,
		FormRules,

	} from 'element-plus'
	import {
		ElMessageBox, ElForm, ElMessage
	} from 'element-plus';
	
	const { t } = useI18n();
	

	// 表单值
	const modelRef = ref<UserInfo>({
		Email:'',
		Mobile:'',
		ImgHead:'',
		RealName:''
	});

	onMounted(async () => {
		console.log('onMounted')
	      modelRef.value = await myInfo();
	      // 处理数据
	    });
	// 表单验证
	const rulesRef = reactive({

		
		Mobile: [
			{ required: true, message: '请输入手机号码', trigger: 'blur' },
			{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
		],
		Email: [
			{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
			{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
		],
		RealName: [
			{ required: true, message: '请输入真实姓名', trigger: 'blur' },
		],
	});

	// form
	const formRef = ref<typeof ElForm>();
	// 注册loading
	const submitLoading = ref<boolean>(false);
	/**
		* 提交
		*/
	const submitForm = async () => {
		submitLoading.value = true;
		try {
			const valid : boolean = formRef.value ? await formRef.value.validate() : false;
			if (valid === true) {
				
				ApiUpdateMyInfo(modelRef.value).then(res=>{
					ElMessageBox.alert("修改成功")
				})

			}
		} catch (error) {
			console.log('error', error);
			ElMessage.warning(t('app.global.form.validatefields.catch'));
		}
		submitLoading.value = false;
	};
</script>
<style scoped>
.ruleForm{
	width: 500px;
}

</style>